<template>
  <div class="membership-container">
    <h2 class="page-title">会员中心</h2>
    
    <!-- 会员状态卡片 -->
    <div class="membership-card">
      <div class="card-header">
        <h3>{{ currentMembershipLevel.name }}会员</h3>
        <div class="membership-badge">{{ currentMembershipLevel.name }}</div>
      </div>
      
      <div class="card-content">
        <div class="membership-info">
          <div class="info-item">
            <span class="label">当前等级</span>
            <span class="value level-{{ currentMembershipLevel.id }}">{{ currentMembershipLevel.name }}</span>
          </div>
          <div class="info-item">
            <span class="label">会员有效期</span>
            <span class="value">{{ membershipExpiry || '永久有效' }}</span>
          </div>
          <div class="info-item">
            <span class="label">积分</span>
            <span class="value">{{ userPoints }}</span>
          </div>
          <div v-if="nextLevel" class="info-item">
            <span class="label">距离升级到{{ nextLevel.name }}</span>
            <span class="value">{{ pointsToNextLevel }}积分</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 会员等级权益 -->
    <div class="membership-benefits">
      <h3>会员权益</h3>
      <div class="benefits-grid">
        <div v-for="benefit in allBenefits" :key="benefit.id" class="benefit-card">
          <div class="benefit-icon">{{ benefit.icon }}</div>
          <h4>{{ benefit.title }}</h4>
          <p>{{ benefit.description }}</p>
          <div class="benefit-availability" :class="{ available: isBenefitAvailable(benefit.id) }">
            {{ isBenefitAvailable(benefit.id) ? '当前等级可用' : '更高等级可用' }}
          </div>
        </div>
      </div>
    </div>
    
    <!-- 会员升级 -->
    <div class="upgrade-section">
      <h3>立即升级</h3>
      <div class="upgrade-options">
        <div v-for="level in membershipLevels" :key="level.id" class="upgrade-card" :class="{ active: level.id === currentMembershipLevel.id }">
          <div class="upgrade-header">
            <h4>{{ level.name }}会员</h4>
            <div class="price">{{ level.price === 0 ? '免费' : '¥' + level.price + '/月' }}</div>
          </div>
          <div class="upgrade-features">
            <ul>
              <li v-for="benefit in getLevelBenefits(level.id)" :key="benefit.id">{{ benefit.title }}</li>
            </ul>
          </div>
          <button v-if="level.id !== currentMembershipLevel.id" class="btn-upgrade" @click="handleUpgrade(level.id)">升级到此等级</button>
          <button v-else class="btn-current">当前等级</button>
        </div>
      </div>
    </div>
    
    <!-- 会员活动 -->
    <div class="membership-activities">
      <h3>会员专享活动</h3>
      <div class="activities-list">
        <div v-for="activity in currentActivities" :key="activity.id" class="activity-item">
          <div class="activity-image">{{ activity.icon }}</div>
          <div class="activity-content">
            <h4>{{ activity.title }}</h4>
            <p>{{ activity.description }}</p>
            <div class="activity-period">活动时间: {{ activity.startDate }} - {{ activity.endDate }}</div>
            <button class="btn-join" @click="joinActivity(activity.id)">立即参与</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { getCurrentUser } from '../services/auth';

const router = useRouter();

// 会员等级数据
const membershipLevels = ref([
  {
    id: 1,
    name: '普通',
    price: 0,
    color: '#999',
    benefits: [1, 2]
  },
  {
    id: 2,
    name: '白银',
    price: 19.9,
    color: '#c0c0c0',
    benefits: [1, 2, 3, 4]
  },
  {
    id: 3,
    name: '黄金',
    price: 49.9,
    color: '#ffd700',
    benefits: [1, 2, 3, 4, 5, 6]
  },
  {
    id: 4,
    name: '钻石',
    price: 99.9,
    color: '#b9f2ff',
    benefits: [1, 2, 3, 4, 5, 6, 7, 8]
  }
]);

// 会员权益数据
const allBenefits = ref([
  {
    id: 1,
    title: '基础服务访问',
    description: '可以访问平台的基础服务功能',
    icon: '📱'
  },
  {
    id: 2,
    title: '个人数据管理',
    description: '管理您的个人信息和偏好设置',
    icon: '👤'
  },
  {
    id: 3,
    title: '无广告体验',
    description: '享受无广告的浏览体验',
    icon: '🚫'
  },
  {
    id: 4,
    title: '积分加速',
    description: '获取积分速度提升50%',
    icon: '⚡'
  },
  {
    id: 5,
    title: '专属客服',
    description: '优先获得客服支持',
    icon: '🤝'
  },
  {
    id: 6,
    title: '专属内容',
    description: '访问仅对高级会员开放的专属内容',
    icon: '🔒'
  },
  {
    id: 7,
    title: '生日礼包',
    description: '会员生日当月获得专属礼包',
    icon: '🎁'
  },
  {
    id: 8,
    title: '定制服务',
    description: '享受定制化的专属服务',
    icon: '✨'
  }
]);

// 会员活动数据
const currentActivities = ref([
  {
    id: 1,
    title: '新手福利',
    description: '新注册用户专享优惠礼包',
    startDate: '2023-01-01',
    endDate: '2023-12-31',
    icon: '🎯'
  },
  {
    id: 2,
    title: '积分兑换',
    description: '使用积分兑换精美礼品',
    startDate: '2023-01-01',
    endDate: '2023-12-31',
    icon: '🎫'
  },
  {
    id: 3,
    title: '会员日特惠',
    description: '每月18日会员专享折扣',
    startDate: '2023-01-18',
    endDate: '2023-12-18',
    icon: '🛒'
  }
]);

// 用户会员数据
const currentMembershipLevel = ref(membershipLevels.value[0]);
const membershipExpiry = ref('永久有效');
const userPoints = ref(0);
const pointsToNextLevel = ref(100);
const nextLevel = ref(membershipLevels.value[1]);

// 初始化数据
onMounted(() => {
  const user = getCurrentUser();
  if (!user) {
    router.push('/login');
    return;
  }
  
  // 这里应该从后端获取用户的真实会员数据
  // 这里使用模拟数据
  initializeMockData();
});

// 初始化模拟数据
const initializeMockData = () => {
  // 模拟用户有一些积分
  userPoints.value = 50;
  
  // 假设升级到下一级需要100积分
  pointsToNextLevel.value = 100 - userPoints.value;
};

// 检查权益是否可用
const isBenefitAvailable = (benefitId) => {
  return currentMembershipLevel.value.benefits.includes(benefitId);
};

// 获取指定等级的权益
const getLevelBenefits = (levelId) => {
  const level = membershipLevels.value.find(l => l.id === levelId);
  if (!level) return [];
  return allBenefits.value.filter(b => level.benefits.includes(b.id));
};

// 处理升级
const handleUpgrade = (levelId) => {
  const level = membershipLevels.value.find(l => l.id === levelId);
  if (!level) return;
  
  // 这里应该实现会员升级的逻辑
  alert(`您将升级到${level.name}会员，价格：${level.price === 0 ? '免费' : '¥' + level.price + '/月'}`);
  
  // 模拟升级成功
  if (level.price === 0) {
    currentMembershipLevel.value = level;
    nextLevel.value = membershipLevels.value.find(l => l.id > level.id) || null;
    pointsToNextLevel.value = nextLevel.value ? 100 : 0;
  }
};

// 参与活动
const joinActivity = (activityId) => {
  const activity = currentActivities.value.find(a => a.id === activityId);
  if (!activity) return;
  
  alert(`您已参与活动：${activity.title}`);
};
</script>

<style scoped>
.membership-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-title {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
  font-size: 2rem;
}

/* 会员卡片样式 */
.membership-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 40px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.card-header h3 {
  margin: 0;
  font-size: 1.5rem;
}

.membership-badge {
  background: rgba(255, 255, 255, 0.2);
  padding: 5px 15px;
  border-radius: 20px;
  font-weight: bold;
}

.membership-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.info-item .label {
  display: block;
  opacity: 0.8;
  font-size: 0.9rem;
  margin-bottom: 5px;
}

.info-item .value {
  display: block;
  font-size: 1.2rem;
  font-weight: bold;
}

/* 会员权益样式 */
.membership-benefits {
  margin-bottom: 40px;
}

.membership-benefits h3 {
  color: #333;
  margin-bottom: 20px;
  font-size: 1.5rem;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.benefit-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.benefit-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.benefit-icon {
  font-size: 2rem;
  margin-bottom: 15px;
}

.benefit-card h4 {
  color: #333;
  margin: 0 0 10px 0;
  font-size: 1.1rem;
}

.benefit-card p {
  color: #666;
  margin: 0 0 15px 0;
  font-size: 0.9rem;
}

.benefit-availability {
  font-size: 0.8rem;
  padding: 5px 10px;
  border-radius: 4px;
  display: inline-block;
}

.benefit-availability.available {
  background: #f0f9ff;
  color: #4285f4;
}

.benefit-availability:not(.available) {
  background: #f9f0ff;
  color: #9c27b0;
}

/* 升级区域样式 */
.upgrade-section {
  margin-bottom: 40px;
}

.upgrade-section h3 {
  color: #333;
  margin-bottom: 20px;
  font-size: 1.5rem;
}

.upgrade-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.upgrade-card {
  background: white;
  border-radius: 8px;
  padding: 25px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  border: 2px solid #f0f0f0;
}

.upgrade-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.upgrade-card.active {
  border-color: #42b983;
  background: #f8fff8;
}

.upgrade-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.upgrade-header h4 {
  margin: 0;
  color: #333;
  font-size: 1.2rem;
}

.price {
  font-weight: bold;
  color: #42b983;
  font-size: 1.2rem;
}

.upgrade-features ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.upgrade-features li {
  padding: 8px 0;
  padding-left: 20px;
  position: relative;
  color: #666;
  font-size: 0.9rem;
}

.upgrade-features li:before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #42b983;
}

/* 按钮样式 */
.btn-upgrade,
.btn-current,
.btn-join {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-upgrade {
  background-color: #42b983;
  color: white;
}

.btn-upgrade:hover {
  background-color: #35495e;
}

.btn-current {
  background-color: #f0f0f0;
  color: #666;
  cursor: not-allowed;
}

.btn-join {
  background-color: #4285f4;
  color: white;
}

.btn-join:hover {
  background-color: #3367d6;
}

/* 活动样式 */
.membership-activities {
  margin-bottom: 40px;
}

.membership-activities h3 {
  color: #333;
  margin-bottom: 20px;
  font-size: 1.5rem;
}

.activities-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
}

.activity-item {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  gap: 20px;
  align-items: center;
}

.activity-image {
  font-size: 3rem;
  flex-shrink: 0;
}

.activity-content {
  flex: 1;
}

.activity-content h4 {
  color: #333;
  margin: 0 0 10px 0;
  font-size: 1.1rem;
}

.activity-content p {
  color: #666;
  margin: 0 0 10px 0;
  font-size: 0.9rem;
}

.activity-period {
  color: #999;
  font-size: 0.8rem;
  margin-bottom: 15px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .activity-item {
    flex-direction: column;
    text-align: center;
  }
  
  .activity-image {
    margin-bottom: 15px;
  }
  
  .membership-info {
    grid-template-columns: 1fr;
  }
}
</style>